<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>舞动健康 - 我的订单</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入FontAwesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: {
                            light: '#ff7eb3',
                            DEFAULT: '#d44bdf',
                            dark: '#a742df',
                        }
                    },
                    fontFamily: {
                        sans: ['-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif']
                    },
                }
            }
        }
    </script>
    <style>
        .gradient-bg {
            background: linear-gradient(135deg, #a742df 0%, #ff7eb3 100%);
        }
        
        .gradient-text {
            background: linear-gradient(135deg, #a742df 0%, #ff7eb3 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        
        .no-scrollbar::-webkit-scrollbar {
            display: none;
        }
        
        .no-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
    </style>
</head>
<body class="font-sans bg-gray-50 text-gray-800 max-w-md mx-auto min-h-screen pb-16">
    <!-- 顶部导航 -->
    <header class="fixed top-0 left-0 right-0 z-20 max-w-md mx-auto">
        <div class="gradient-bg px-4 py-3 text-white">
            <div class="flex items-center justify-center relative">
                <button class="absolute left-0 w-10 h-10 flex items-center justify-center" onclick="window.location.href='my.html'">
                    <i class="fa-solid fa-arrow-left"></i>
                </button>
                <div class="text-lg font-medium">我的订单</div>
            </div>
        </div>
        
        <!-- 标签导航 -->
        <div class="bg-white shadow-sm">
            <div class="flex overflow-x-auto no-scrollbar">
                <button class="flex-1 py-3 text-center text-primary-dark font-medium border-b-2 border-primary-dark" onclick="switchTab('all')">
                    全部
                </button>
                <button class="flex-1 py-3 text-center text-gray-500" onclick="switchTab('unpaid')">
                    待付款
                </button>
                <button class="flex-1 py-3 text-center text-gray-500" onclick="switchTab('pending')">
                    待服务
                </button>
                <button class="flex-1 py-3 text-center text-gray-500" onclick="switchTab('reviewing')">
                    待评价
                </button>
                <button class="flex-1 py-3 text-center text-gray-500" onclick="switchTab('completed')">
                    已完成
                </button>
            </div>
        </div>
    </header>
    
    <!-- 页面内容区 -->
    <main class="pt-28 px-4 space-y-4">
        <!-- 待付款订单卡片 -->
        <div class="bg-white rounded-xl shadow-sm overflow-hidden" onclick="window.location.href='order_detail.html'">
            <div class="p-4 border-b border-gray-100">
                <div class="flex justify-between items-center">
                    <div class="flex items-center">
                        <div class="w-10 h-10 rounded-full overflow-hidden">
                            <img src="https://images.unsplash.com/photo-1594381898411-846e7d193883?q=80&w=300&auto=format&fit=crop"
                                 alt="教练头像" class="w-full h-full object-cover">
                        </div>
                        <div class="ml-3">
                            <h3 class="font-medium">张教练</h3>
                            <p class="text-xs text-gray-500">健身指导</p>
                        </div>
                    </div>
                    <div class="text-yellow-500 text-sm font-medium">
                        待付款
                    </div>
                </div>
            </div>
            
            <div class="p-4">
                <div class="flex">
                    <div class="w-20 h-20 rounded-lg bg-gray-100 overflow-hidden">
                        <img src="https://images.unsplash.com/photo-1571388208497-71bedc66e932?q=80&w=200&auto=format&fit=crop"
                             alt="服务图片" class="w-full h-full object-cover">
                    </div>
                    <div class="ml-3 flex-1">
                        <h3 class="font-medium mb-1">私人定制健身计划</h3>
                        <div class="text-xs text-gray-500 mb-2">单次 | 90分钟 | 含饮食指导</div>
                        <div class="flex justify-between">
                            <div class="text-xs text-gray-500">
                                2023-06-10 10:30
                            </div>
                            <div class="text-primary-dark font-medium">
                                ¥280
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="bg-gray-50 p-4 flex justify-end space-x-3">
                <button class="px-4 py-1.5 border border-gray-300 rounded-full text-sm text-gray-600">
                    取消订单
                </button>
                <button class="px-4 py-1.5 gradient-bg text-white rounded-full text-sm">
                    去支付
                </button>
            </div>
        </div>
        
        <!-- 待服务订单卡片 -->
        <div class="bg-white rounded-xl shadow-sm overflow-hidden" onclick="window.location.href='order_detail.html'">
            <div class="p-4 border-b border-gray-100">
                <div class="flex justify-between items-center">
                    <div class="flex items-center">
                        <div class="w-10 h-10 rounded-full overflow-hidden">
                            <img src="https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?q=80&w=300&auto=format&fit=crop"
                                 alt="教练头像" class="w-full h-full object-cover">
                        </div>
                        <div class="ml-3">
                            <h3 class="font-medium">林教练</h3>
                            <p class="text-xs text-gray-500">瑜伽课程</p>
                        </div>
                    </div>
                    <div class="text-primary-dark text-sm font-medium">
                        待服务
                    </div>
                </div>
            </div>
            
            <div class="p-4">
                <div class="flex">
                    <div class="w-20 h-20 rounded-lg bg-gray-100 overflow-hidden">
                        <img src="https://images.unsplash.com/photo-1599447421416-3414500d18a5?q=80&w=200&auto=format&fit=crop"
                             alt="服务图片" class="w-full h-full object-cover">
                    </div>
                    <div class="ml-3 flex-1">
                        <h3 class="font-medium mb-1">哈他瑜伽私教课程</h3>
                        <div class="text-xs text-gray-500 mb-2">单次 | 60分钟 | 精准体位纠正</div>
                        <div class="flex justify-between">
                            <div class="text-xs text-gray-500">
                                2023-06-08 14:00
                            </div>
                            <div class="text-primary-dark font-medium">
                                ¥300
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="bg-gray-50 p-4 flex justify-end space-x-3">
                <button class="px-4 py-1.5 border border-gray-300 rounded-full text-sm text-gray-600">
                    查看详情
                </button>
                <button class="px-4 py-1.5 gradient-bg text-white rounded-full text-sm">
                    联系教练
                </button>
            </div>
        </div>
        
        <!-- 待评价订单卡片 -->
        <div class="bg-white rounded-xl shadow-sm overflow-hidden" onclick="window.location.href='order_detail.html'">
            <div class="p-4 border-b border-gray-100">
                <div class="flex justify-between items-center">
                    <div class="flex items-center">
                        <div class="w-10 h-10 rounded-full overflow-hidden">
                            <img src="https://images.unsplash.com/photo-1566241832378-917a0f30db2c?q=80&w=300&auto=format&fit=crop"
                                 alt="教练头像" class="w-full h-full object-cover">
                        </div>
                        <div class="ml-3">
                            <h3 class="font-medium">王教练</h3>
                            <p class="text-xs text-gray-500">拉丁舞课程</p>
                        </div>
                    </div>
                    <div class="text-blue-500 text-sm font-medium">
                        待评价
                    </div>
                </div>
            </div>
            
            <div class="p-4">
                <div class="flex">
                    <div class="w-20 h-20 rounded-lg bg-gray-100 overflow-hidden">
                        <img src="https://images.unsplash.com/photo-1534287473209-7d1a3f030423?q=80&w=200&auto=format&fit=crop"
                             alt="服务图片" class="w-full h-full object-cover">
                    </div>
                    <div class="ml-3 flex-1">
                        <h3 class="font-medium mb-1">拉丁舞基础入门课程</h3>
                        <div class="text-xs text-gray-500 mb-2">单次 | 120分钟 | 包含4支舞种</div>
                        <div class="flex justify-between">
                            <div class="text-xs text-gray-500">
                                2023-06-05 19:00
                            </div>
                            <div class="text-primary-dark font-medium">
                                ¥320
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="bg-gray-50 p-4 flex justify-end space-x-3">
                <button class="px-4 py-1.5 border border-gray-300 rounded-full text-sm text-gray-600">
                    查看详情
                </button>
                <button class="px-4 py-1.5 gradient-bg text-white rounded-full text-sm">
                    评价课程
                </button>
            </div>
        </div>
        
        <!-- 已完成订单卡片 -->
        <div class="bg-white rounded-xl shadow-sm overflow-hidden" onclick="window.location.href='order_detail.html'">
            <div class="p-4 border-b border-gray-100">
                <div class="flex justify-between items-center">
                    <div class="flex items-center">
                        <div class="w-10 h-10 rounded-full overflow-hidden">
                            <img src="https://images.unsplash.com/photo-1571019613576-2b22c76fd955?q=80&w=300&auto=format&fit=crop"
                                 alt="教练头像" class="w-full h-full object-cover">
                        </div>
                        <div class="ml-3">
                            <h3 class="font-medium">李教练</h3>
                            <p class="text-xs text-gray-500">声音疗愈</p>
                        </div>
                    </div>
                    <div class="text-green-500 text-sm font-medium">
                        已完成
                    </div>
                </div>
            </div>
            
            <div class="p-4">
                <div class="flex">
                    <div class="w-20 h-20 rounded-lg bg-gray-100 overflow-hidden">
                        <img src="https://images.unsplash.com/photo-1528825871115-3581a5387919?q=80&w=200&auto=format&fit=crop"
                             alt="服务图片" class="w-full h-full object-cover">
                    </div>
                    <div class="ml-3 flex-1">
                        <h3 class="font-medium mb-1">心灵疗愈冥想课程</h3>
                        <div class="text-xs text-gray-500 mb-2">单次 | 60分钟 | 减压放松</div>
                        <div class="flex justify-between">
                            <div class="text-xs text-gray-500">
                                2023-05-25 16:00
                            </div>
                            <div class="text-primary-dark font-medium">
                                ¥250
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="bg-gray-50 p-4 flex justify-end space-x-3">
                <button class="px-4 py-1.5 border border-gray-300 rounded-full text-sm text-gray-600">
                    查看详情
                </button>
                <button class="px-4 py-1.5 border border-primary-dark text-primary-dark rounded-full text-sm">
                    再次预约
                </button>
            </div>
        </div>
    </main>
    
    <!-- 底部导航 -->
    <nav class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 py-1.5 z-20 max-w-md mx-auto">
        <div class="flex justify-around items-center">
            <a href="index.html" class="flex flex-col items-center w-1/4 text-gray-500">
                <i class="fa-solid fa-house text-xl mb-0.5"></i>
                <span class="text-xs">首页</span>
            </a>
            <a href="coach.html" class="flex flex-col items-center w-1/4 text-gray-500">
                <i class="fa-solid fa-user-tie text-xl mb-0.5"></i>
                <span class="text-xs">教练</span>
            </a>
            <a href="service.html" class="flex flex-col items-center w-1/4 text-gray-500">
                <i class="fa-solid fa-clipboard-list text-xl mb-0.5"></i>
                <span class="text-xs">服务</span>
            </a>
            <a href="my.html" class="flex flex-col items-center w-1/4 text-primary-dark">
                <i class="fa-solid fa-user text-xl mb-0.5"></i>
                <span class="text-xs font-medium">我的</span>
            </a>
        </div>
    </nav>
    
    <script>
        // 切换标签
        function switchTab(tabId) {
            // 实际应用中这里会根据选中的标签显示不同的内容
            const tabs = document.querySelectorAll('.flex.overflow-x-auto > button');
            tabs.forEach((tab, index) => {
                tab.classList.remove('text-primary-dark', 'font-medium', 'border-b-2', 'border-primary-dark');
                tab.classList.add('text-gray-500');
                
                // 如果当前标签是目标标签，高亮它
                if (tab.textContent.trim().includes(getTabName(tabId))) {
                    tab.classList.remove('text-gray-500');
                    tab.classList.add('text-primary-dark', 'font-medium', 'border-b-2', 'border-primary-dark');
                }
            });
            
            // 这里可以添加代码来显示/隐藏相应的内容区域
        }
        
        // 根据tabId获取对应的标签名
        function getTabName(tabId) {
            switch (tabId) {
                case 'all': return '全部';
                case 'unpaid': return '待付款';
                case 'pending': return '待服务';
                case 'reviewing': return '待评价';
                case 'completed': return '已完成';
                default: return '全部';
            }
        }
        
        // 从URL参数中获取tab值
        function getTabFromURL() {
            const urlParams = new URLSearchParams(window.location.search);
            return urlParams.get('tab') || 'all';
        }
        
        // 页面加载完成后执行
        document.addEventListener('DOMContentLoaded', function() {
            // 根据URL参数切换到相应的标签
            const tabId = getTabFromURL();
            switchTab(tabId);
        });
    </script>
</body>
</html> 